<template>
	<div class="count-warp">
		<slot name="count-time" :day="day" :hour="hour" :minute="minute" :second="second"></slot>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	export default{
		data (){
			return {
				day:'00',
                hour:'00',
                minute:'00',
                second:'00',
                remainTime:'',
                text:'',
                t:'',
                timeVal:''
			};
		},
		props:[
			'endTime'
		],
		watch:{
			'endTime':'timeOutFunc'
		},
		mounted (){
			var _self = this;

				_self.timeOutFunc();
				//倒计时不走解决方案
				var lastTime = +new Date;                
				window.setInterval(function() {
					if(Math.abs(+new Date - lastTime) > 3000) {
					   _self.remainTime = _self.remainTime - parseInt(Math.abs(+new Date - lastTime) / 1000);
					}
					lastTime = +new Date;
				}, 1000);
		},
		methods: {
			timeOutFunc:function(){

				var _self = this;

				clearInterval(_self.t);
				_self.timeVal = _self.endTime;
				_self.t = window.setInterval(_self.timer, 1000);
			},
			timer:function() {

				var _self = this,
					lesssecond;
					_self.remainTime  = _self.timeVal - 1000;
					lesssecond = parseInt(_self.remainTime / 1000);
				if(_self.remainTime > 0){
					_self.day = _self.fillZero(Math.floor(lesssecond / (60 * 60 * 24))),
					_self.hour = _self.fillZero(Math.floor((lesssecond - _self.day * 24 * 60 * 60) / 3600)),
					_self.minute = _self.fillZero(Math.floor((lesssecond - _self.day * 24 * 60 * 60 - _self.hour * 3600 ) / 60)),
					_self.second = _self.fillZero(Math.floor(lesssecond - _self.day * 24 * 60 * 60 - _self.hour * 3600 - _self.minute * 60));
					_self.timeVal = _self.remainTime;
				 	//e.text = e.day+'天'+e.hour+'小时'+e.min+'分后结束';
				}else {
					clearInterval(_self.t);
					_self.text='已结束';
				}
			},
			fillZero:function(n) {

				if(n<10) return '0'+n;
				else {
					return n;
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.count-warp{
		width:100%;
	}
</style>